import React from 'react';
import { Form, Input, Button, Alert, Row, Col } from 'antd';
import { connect } from 'dva';
import { Link } from 'dva/router';
import { setTitle } from '../../utils/utils';
import styles from '../login/login.css';
import loginBg from '../../assets/login-bg.png';
import logo from '../../assets/logo.png';

const FormItem = Form.Item;

/**
 *  登录界面
 */
@connect(({ login, loading }) => ({
  login,
  //控制状态，绑定事件
  submitting: loading.effects['login/doLogin']
}))
@Form.create()
class ForgotPassword extends React.Component {
  state = {
    type: 'userNameAndPwd',
    loading: false
  };

  submitBtn = e => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log(values);
      }
    });
  };

  /**
   *  错误信息
   */
  renderMessage = content => {
    return <Alert style={{ marginBottom: 24 }} message={content} type="error" showIcon />;
  };

  componentDidMount() {
    setTitle('Retailer platform');
    // const { dispatch } = this.props;
    // dispatch({
    //   type: "login/test"
    // })
  }

  /**
   * 点击其他方式登录
   * @param e 获取的点击的value
   */
  handleMenuClick = e => {
    console.log(e);
  };

  render() {
    const { getFieldDecorator } = this.props.form;
    const { loading } = this.state;

    return (
      <div className={styles.body}>
        <div className={styles.login}>
          <Row style={{ height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
            <Col span={14} style={{ height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
              <img src={loginBg} alt="" className={styles.bg} />
            </Col>
            <Col
              span={10}
              style={{
                height: '100%',
                display: 'flex',
                justifyContent: 'center',
                alignItems: 'center',
                flexDirection: 'column'
              }}
            >
              <div className={styles.head} style={{ marginBottom: 15 }}>
                <img className={styles.logo} src={logo} alt="" />
                <div className={styles.label} style={{ marginBottom: 10 }}>
                  Forgot password
                </div>
                <div className={styles.labelTips}>
                  Please enter your registered email and we will send you the password reset instructions.
                </div>
              </div>
              <Form onSubmit={this.submitBtn} style={{ width: '80%' }}>
                <FormItem>
                  {getFieldDecorator('email', {
                    rules: [{ required: true, message: 'Email cannot be empty!' }]
                  })(<Input id="email" type="text" className={'rc-input'} placeholder="Email" />)}
                </FormItem>
                <FormItem>
                  <Button
                    loading={loading}
                    style={{
                      width: '100%',
                      borderBottomRightRadius: 0,
                      background: '#333',
                      border: 0,
                      borderTopRightRadius: 0
                    }}
                    type="primary"
                    htmlType="submit"
                  >
                    Send password reset
                  </Button>
                  <div className={styles.toLogin}>
                    <Link to="/login">Back to login</Link>
                  </div>
                </FormItem>
              </Form>
            </Col>
          </Row>
        </div>
      </div>
    );
  }
}
export default ForgotPassword;
